<template>
  <app-page card>
    <app-page-main>
      <template #header>
        <div class="app-query"></div>
        <div class="app-action">
          <el-button plain icon="plus" type="primary" @click="appHandleAdd()">添加</el-button>
        </div>
      </template>

      <el-table :data="appList" stripe style="width: 100%">
        <el-table-column prop="roleName" label="角色名称" show-overflow-tooltip></el-table-column>
        <!-- <el-table-column prop="systemType" label="角色标识" show-overflow-tooltip v-if="userInfo && userInfo.systemType == 'admin'"></el-table-column> -->
        <el-table-column prop="systemTypeDesc" label="系统" show-overflow-tooltip v-if="userInfo && userInfo.systemType == 'admin'"></el-table-column>
        <el-table-column label="角色状态">
          <template #default="scope">
            <el-switch :before-change="() => appHandleUpdate(scope.row, { isOpen: !scope.row.isOpen }, !scope.row.isOpen ? '确认上线？' : '确认下线？', '已修改')" v-model="scope.row.isOpen"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button link type="primary" icon="edit" @click="appHandleEdit(scope.row)">编辑</el-button>
            <el-button link type="primary" icon="delete" @click="appHandleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </app-page-main>

    <template #footer>
      <el-pagination @size-change="appHandleSizeChange" @current-change="appHandlePageChange" :current-page="appPage" :page-size="appPageSize" layout="total, sizes, prev, pager, next, jumper" :total="appTotal"></el-pagination>
    </template>

    <!-- 弹窗新增/编辑内容 -->
    <app-dialog-edit width="500px" v-model="appShowDetail" v-model:detail="appDetail" :json="formJson" @change="appInit">
      <template #menu>
        <el-tree ref="menuTree" :props="{ label: 'menuName', children: 'children' }" :data="menuTree" show-checkbox node-key="menuId" default-expand-all :default-checked-keys="appDetail.menuIds" />
      </template>
    </app-dialog-edit>
  </app-page>
</template>

<script>
import { mapState } from 'vuex'
import { mixins } from 'jax-node'

export default {
  mixins: [mixins.pageList],
  components: {},
  data() {
    return {
      menuTree: [], // 菜单树
      dict: null, // 字典
    }
  },

  computed: {
    ...mapState('app', ['userInfo', 'dict']),
    formJson() {
      const fixed = false
      const required = true

      // 动态表单
      const dynamicFormItem = []

      let menuTree = []
      if (!this.appDetail.isAdmin) menuTree.push({ name: 'menu', label: '权限信息' })

      return [{ name: 'roleName', label: '角色名称', required }, ...dynamicFormItem, { name: 'isAdmin', label: '全部权限', type: 'switch' }, ...menuTree]
    },
  },
  created() {
    this.getDict()
  },
  watch: {
    'appDetail.systemType'() {
      this.getMenuTree()
    },
  },
  methods: {
    // 获取字典
    getDict() {
      this.$http('/system/dict').then((res) => {
        this.dict = res
      })
    },

    // 取回数据前
    appBeforeFetch() {
      this.getMenuTree()
    },
    // 获取菜单树
    getMenuTree() {
      const params = {
        action: 'role_auth_menu',
        systemType: this.appDetail.systemType,
      }

      this.$http(`/system/menu/tree`, {
        params: params,
      }).then((ret) => {
        this.menuTree = ret.data
      })
    },

    // 保存数据前
    appBeforeSubmit(detail) {
      if (!this.appDetail.isAdmin) {
        const menuIds = this.$refs.menuTree.getCheckedNodes().map((menuItem) => menuItem.menuId)
        const halfMenuIds = this.$refs.menuTree.getHalfCheckedNodes().map((menuItem) => menuItem.menuId)

        detail.menuIds = menuIds
        detail.halfMenuIds = halfMenuIds
      }
    },
  },
}
</script>
